<template>
	<view>
		
		<van-nav-bar
		  left-text="返回"
		  left-arrow
		  :border="false"
		 @click-left="back"
		 
		/>
		
		<van-toast id="van-toast" />
		<view class="container ">
			<!-- form表单 -->
			<view class="form_wrap">
				<view class="form br">
					<view class="tit_wrap ">
						<view class="tit">
							注册用户
						</view>
						<view class="tip fs26">
							请输入手机号
						</view>
					</view>
					<view class="form_items_wrap br">
						<van-cell-group :border="false">
							<van-field :error-message="errorMessage" :error="error" type="text"  :value="phone" placeholder="请输入手机号码" class="fs" @input="inputPhone" />
						</van-cell-group>

						<view class="btn">
							<van-button type="primary" size="large" @click="goReg">同意协议并注册,进入下一步</van-button>
						</view>
						
						<view class="fs26 mt30">我已阅读并同意,<text class="xieyi">坚果云软件服务协议</text></view>

					</view>
				</view>
			</view>

		</view>
		
	</view>

</template>

<script>
	import Toast from "../../wxcomponents/vant/toast/toast.js"
	// import Footer from "../../components/footer.vue"
	import {reg,sendSms} from "../../api/api.js"
	export default {
		data() {
			return {
				computeTime:0,
				// 是否获取验证码
				getCodeIf:false,
				phone:'',
				code:'',
				pwd:'',
				centainPwd:'',
				username:'',
				error:false,
				errorMessage:''
				
			}
		},
		onLoad(){
			
		},
		components: {
			// Footer
		},
		methods: {
			// 获取验证码
		async	getCode(){
				this.getCodeIf = true
				if(!this.computeTime){
					this.computeTime = 60
					this.intervalId =  setInterval(()=>{
						this.computeTime--
						if(this.computeTime <= 0 ){
							clearInterval(this.intervalId)
							this.getCodeIf = false
						}
					},1000)
					// 发送短信验证码
					// const res = await this.request({
					// 	url:this.baseURL+'/api/sms/send',
					// 	method:'GET',
					// 	data:{
					// 		mobile:this.phone
					// 	}
					// })
					// console.log(res)
					
					const res = await sendSms(this.phone)
				}
				
			},
			
			inputPhone(e){
				
				// console.log('手机号',e)
				
				if(this.phone.length>0){
					return this.errorMessage = ''
				}
				
				this.phone = e.detail
			},
			inputPwd(e){
				// console.log('mima',e)
				this.pwd = e.detail
			},
			inputUserName(e){
				
				this.username = e.detail
			},
			inputCentainPwd(e){
				// console.log('确认密码',e)
				this.centainPwd = e.detail
			},
			inputCode(e){
				// console.log('短信验证码',e)
				this.code = e.detail
			},
			// 返回上一页
			back(){
				uni.navigateBack(
				)
			},
		
			goReg(){
				// if(!this.phone) return Toast.fail('手机号必填');
				// if(!this.code){
				// 	return Toast.fail('验证码必填')
				// }
				// if(!this.pwd) return Toast.fail('密码必填');
				// if(!this.username) return Toast.fail('用户名必填');
				// if(this.pwd !== this.centainPwd) return Toast.fail('密码输入不一致')
				
				// if(!this.phone){
				// 	return Toast.fail('手机号必填');
				// }else if(!this.code){
				// 	return Toast.fail('验证码必填')
				// }else if(!this.pwd){
				// 	 return Toast.fail('密码必填')
				// }else if(!this.username){
				// 	return Toast.fail('用户名必填')
				// }else if(this.pwd !== this.centainPwd){
				// 	return Toast.fail('密码输入不一致')
				// }else{
				// 	return Toast.fail('验证码不正确')
				// }
				
				// const res = await reg({username:this.username,password:this.pwd,mobile:this.phone,code:this.code})
				
				// if(res.data.username === this.phone){
				// 	 return Toast.fail(res.msg)
				// }else{
				// 	Toast.success('注册成功')
				// }
				// uni.navigateTo({
				// 	url:'../login/login'
				// })
				
				if(!this.phone){
					// this.error = true
					return this.errorMessage = '手机号不能为空'
				}
				uni.navigateTo({
					url:'../setPwd/setPwd'
				})
				
				
				
				
				
				
				
				
				
					
			}
			
			
			
			
			
			
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .van-nav-bar__text{
		color: #4a4a4a !important;
	}
	
	/deep/ .van-icon{
		color: #4a4a4a !important;
		margin-right: 22rpx !important;
	}
	
	/deep/ .van-cell{
		padding-left: 0;
		padding-right: 0;
		border-bottom: 1px solid #e5e5e6;
	}
	
	.van-button{
		border: none !important;
		
	}
	// 获取到验证码按钮颜色改变
	.btncode{
		color: red;
	}
	.fs {
		font-size: 18rpx;
	}

	// .br{
	// 	border: 1px solid red;
	// }
	.container {
		padding: 41rpx 40rpx 120rpx;
		// background-repeat: repeat;

		.form_wrap {
			// background-color: #f4fee3;
			opacity: 0.9;
			
			.xieyi{
				color: $primaryColor;
			}

			.form {
				// width: 457rpx;
				// height: 760rpx;
				border-radius: 8rpx;
				// padding: 25rpx;

				.tit_wrap {
					// width: 409rpx;
					// height: 115rpx;

					.tit {
						font-size: 44rpx;
						color: #333333;
						font-weight: bold;
					}

					.tip {
						color: #bbbbbb;
						font-size: 20rpx;
						margin-top: 34rpx;
					}
				}

				.form_items_wrap {
					margin-top: 32rpx;

					.btn {
						margin-top: 48rpx;
						border-radius: 3rpx;
					}
				}
			}
		}

	}

</style>
